<template>

  <div class="box">
    <el-container height="80px" class="yes">
      <el-header>
        <el-row class="button">
          <el-button type="primary" class="tto" @click="showDialog = true">新增资讯</el-button>
          <el-button type="danger" class="tto" @click="shanchu">全部删除</el-button>
          <span>请选择展示类型</span>
          <el-select v-model="value" placeholder="请选择展示类型" style="width:180px;">
            <el-option value="富文本" />
            <el-option value="外链" />
          </el-select>
          <span>是否在首页展示</span>
          <el-select v-model="value1" placeholder="是否在首页展示" style="width:180px;">
            <el-option value="是" />
            <el-option value="否" />
          </el-select>
          <span>请选择展示客户端</span>
          <el-select v-model="value2" placeholder="请选择展示客户端" style="width:180px;">
            <el-option value="业主端" />
            <el-option value="物业端" />
          </el-select>
        </el-row>
        <el-row class="button">
          <span>请选择推送状态</span>
          <el-select v-model="value3" placeholder="请选择推送状态">
            <el-option value="未推送" />
            <el-option value="以推送" />
          </el-select>
          <el-button type="info">搜索</el-button>
        </el-row>
      </el-header>
      <el-main class="no">
        <!-- 组件 -->
        <div>
          <div class="kehudua">咨询管理</div>
          <el-table border :data="tableData">
            <el-table-column label="序号" :show-overflow-tooltip="true" type="index" />
            <el-table-column label="资讯标题" prop="title" />

            <el-table-column label="所属小区" prop="name" />
            <el-table-column label="所属标签" prop="tagName" />
            <el-table-column label="封面图" align="center" prop="imageUrl">
              <template v-slot="{row}">
                <el-image :src="row.imageUrl" alt="" class="imgages" />
              </template>
            </el-table-column>
            <el-table-column label="详情类型" prop="type">
              <template v-slot="{row}">
                <span>{{ row.type===0?'富文本':'外链' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否置顶" prop="isTop">
              <template v-slot="{row}">
                <span>{{ row.isTop===0?'否':'是' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="链接地址" align="center" prop="linkUrl">
              <template v-slot="{row}">
                <span>{{ row.linkUrl===''?'暂无链接内容':'www.baidu.com' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="280" class="yes">
              <el-button type="primary" class="yes2" @click="xiugai">修改</el-button>
            </el-table-column>
          </el-table>
          <!-- <div class="no">
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
        />
      </el-row>
    </div> -->
        </div>
      </el-main>
    </el-container>
    <!-- 弹层 -->

  </div>

</template>

<script>
// import teBzujian from '@/views/app/tebzujian'
// import add from '@/views/app/gggl/add.vue'
import { getzixun } from '@/api/advertising'
// import { get } from 'js-cookie'
export default {
  components: {
    // teBzujian,
    // add

  },
  data() {
    return {
      value: '',
      value1: '',
      value2: '',
      value3: '',
      showDialog: false,
      tableData: [],
      zixun: {
        pageIndex: 1,
        pageSize: 10,
        type: '',
        isTop: '',
        communityId: ''
      }

    }
  },
  created() {
    this.getzixun()
  },
  methods: {
    async getzixun() {
      try {
        const { data } = await getzixun(this.zixun)
        this.tableData = data
        // console.log(gettt)
        // console.log(this.tableData)
      } catch (err) {
        console.log(err)
      }
      // console.log(yes)
    },
    jiao(e) {
      this.tableData.push(e)
    },
    shanchu() {
      this.tableData = []
      this.$message.success('删除成功')
    },
    xiugai() {
      this.showDialog = true
    }
  }
}
</script>

<style>

.no{
  margin-top: 35px;
}
.kehudua{
    color: skyblue;
    font-size: 20px;
    line-height: 50px;
}
.cell{
 /* display: flex; */
 /* justify-content: center; */
 margin: 0 auto;
 text-align: center;
}
.yes1{
    background-color: #fab6b6;
    color: #fff;
}
.yes2{
    background-color: #85ce61;
    color: #fff;
}
.dingding{
  text-align: center;

}
.box{
 padding: 20px!important;
 background-color: #fefefe !important;
 /* border: 2px solid pink ; */
 /* box-sizing:border-box !important; */
 /* height: 100%; */
 width: 100%;
}
.el-header, .el-footer {
    /* background-color: #fff; */
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .button{
  display: flex;
  /* padding: 10px; */
  /* justify-content: center; */
  align-items: center;
  }

span{
  margin-left: 5px;
  text-align: center;
  margin: 0 10px;
}
.yes{
  border: 1px solid #e4e7ed;
}
</style>
